<template>
   <div class="gallery-edit">
    <yk-upload :upload-url="uploadUrl"  :draggable="true" @handleSuccess="handleUploadSuccess"></yk-upload>
    <div class="waterfall">
        <div class="waterfall_item" v-for="item in  fileUrlList" :key="item.id">
            <img :src="baseImgPath + '/' +item.url" alt="">
            <IconStarFill class="waterfall_item-cover" v-show="item.id == coverIndex"/>
            <yk-space size="ss">
                <p class="waterfall_item-tool" v-show="item.id != coverIndex" @click="changCover(item)">设为封面</p>
                <IconDeleteOutline class="waterfall_item-delete" @click="deletePicture(item)"/>
            </yk-space>
        </div>
    </div>
   </div>
</template>
<script setup lang="ts">
import { ref,onMounted,watch } from 'vue'
// import { mkphotos } from '../../mock/data'
import {baseUrl,baseImgPath} from '../../utils/env';
import { useCode } from '../../hooks/codeHook';
import { useFile } from '../../hooks/fileHook';

import type { fileData } from '../../utils/interface';
const { tackleCode } = useCode();

const props=defineProps({
 galleryData:{
    type:Object,
    default:()=>({ cover:'', content:'' })
  }
})

//上传文件的接口地址
const uploadUrl = `${baseUrl}/api/file/upload`;
//文件地址列表
const fileUrlList = ref<{ id:number,url: string }[]>([])
const emits = defineEmits(['cover','editors'])
//封面
const coverIndex = ref<number|null>(0)
const changCover = (e:{id:number,url:string})=>{
  coverIndex.value =e.id;
  emits('cover',e.url)
}

//删除
const { deleteFile } = useFile();
const deletePicture = (e:{id:number,url:string})=>{
    fileUrlList.value=fileUrlList.value.filter((item:any)=>item.id!=e.id)
    emits('editors',fileUrlList.value.map((obj:any)=>JSON.stringify(obj)).join(" "))
     if(coverIndex.value ==e.id && fileUrlList.value.length>0 ){
        coverIndex.value = fileUrlList.value[0].id;
        emits('cover',fileUrlList.value[0].url)
     }else if(fileUrlList.value.length==0 && fileUrlList.value.length<=0){
        coverIndex.value = -1;
        emits('cover','')
     }
     deleteFile(e);
}


//图片提交成功
const handleUploadSuccess = (res: {code:number,data:fileData}) => {

      if (tackleCode(res.code)) {
        let fileData = res.data
        let photo = {
            id: fileData.id, // 文件id
            url:fileData.url, // 文件路径
        }
        fileUrlList.value.push(photo)
        emits('editors',fileUrlList.value.map((obj:any)=>JSON.stringify(obj)).join(" "))
        if(!coverIndex.value){
          coverIndex.value = photo.id;
          emits('cover',photo.url)
        }
    }
}

//编辑时获取图库数据
watch(()=>props.galleryData,(newVal)=>{
       // 添加空值检查
      if (newVal && newVal.content) {
        fileUrlList.value = newVal.content
          .split(' ') // 按空格分割
          .filter((item:any) => item.trim()) // 过滤空字符串
          .map((item:any) => JSON.parse(item)); // 解析每个 JSON 字符串
           emits('editors',fileUrlList.value.map((obj:any)=>JSON.stringify(obj)).join(" "))
        // 同样添加空值检查
        const coverItem = fileUrlList.value.find((item:any)=>item.url == newVal.cover);
        if (coverItem) {
          coverIndex.value = coverItem.id;
        }
      } else {
        // 处理 null 情况，例如重置 fileUrlList
        fileUrlList.value = [];
        coverIndex.value = null;
      }
})

onMounted(()=>{
 
})

</script>
<style scoped lang="less">
.gallery-edit {
  background: @bg-color-l;
  border-radius: @radius-m;
  padding:@space-xl ;
  width: 100%;
  min-height: 680px;
}
.waterfall {
  width: 100%;
  column-count: 3;
  column-gap: @space-m;
  padding-top: 32px;
  &_item {
    width: 100%;
    margin-bottom: @space-xl;
    img {
      width: 100%;
      border-radius: @radius-m;
      background-color: rgb(98, 98, 182);
      min-width: 150px;
      min-height: 100px;
    }
    .yk-space {
    position: absolute;
    top: @space-l;
    left: @space-l;
    }
    &-cover {
      position: absolute;
      top: @space-l;
      right: @space-l;
      width: 24px;
      height: 24px;
      color: @wcolor;
    }
    &-tool {
      line-height: 32px;
      padding:0 @space-m;
      border-radius: @radius-m;
      background:rgba(255,255,255,0.56) ;
      color:@pcolor;
      cursor: pointer;
      opacity: 0;
      &:hover {
        color: @ecolor;
        background: rgba(255,255,255,0.8);
        backdrop-filter: blur(2px);
    }
}
    &-delete {
      width: 32px;
      height: 32px;
      padding:9px;
      border-radius: @radius-m;
      background:rgba(255,255,255,0.56) ;
      color:@gray;
      cursor: pointer;
      transition: all @animatb;
      opacity: 0;
      &:hover {
        color: @ecolor;
        background: rgba(255,255,255,0.8);
        backdrop-filter: blur(2px);
      }
    }
    &:hover{
    .waterfall_item-tool,.waterfall_item-delete{
      opacity: 1;
    }
  }
  }

}
</style>